<template>
  <div class="app-container">
    <div class="search">
      <el-form
        ref="queryForm"
        class="queryForm"
        :inline="true"
        :model="formInline"
        label-width="auto"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="模型名称:"
              class="formItem"
            >
              <el-input
                v-model="formInline.modelName"
                placeholder="请输入模型名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
              >搜索</el-button>
              <el-button
                size="small"
                icon="el-icon-refresh"
                @click="handleReset"
              >重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="list">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{background:'#eff7fd'}"
          ref="table"
          highlight-current-row
          v-loading="loading1"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="模型名称"
            prop="modelName"
            align="center"
          ></el-table-column>
          <el-table-column
            label="模型描述"
            prop="modelDescribe"
            align="center"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click.stop="handleCheck(scope.row)"
              >定义</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="设置评分定义"
      :visible.sync="showFlag"
      width="60%"
      class="dialog"
    >
      <div class="list">
        <!-- <h3>设置评分定义</h3> -->
        <div class="header">
          <h4>评分分布</h4>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="editMailbox"
          >新增</el-button>
        </div>
        <el-table
          :data="dataList"
          border
          style="width: 100%"
          :header-cell-style="{background:'#eff7fd'}"
          ref="table"
          highlight-current-row
          v-loading="loading"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            label="最小值（含等于)"
            prop="minValue"
            align="center"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.minValue"
                placeholder="请输入最小值"
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="最大值"
            prop="maxValue"
            align="center"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.maxValue"
                placeholder="请输入最大值"
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="企业评级"
            prop="level"
            align="center"
          >
            <template slot-scope="scope">
              <el-select
                style="width: 100%;"
                v-model="scope.row.level"
              >
                <el-option
                  v-for="(dict, index) in levelOptions"
                  placeholder="请选择企业评级"
                  :label="dict.label"
                  :value="dict.value"
                  :key="index"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="评级含义"
            prop="meaning"
            align="center"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.meaning"
                placeholder="请输入评级含义"
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click.stop="handleDelete(scope)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="save">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="saveMailbox"
          >保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getScoringScoreList,
  editScoringScore,
  getManageList,
} from '@/api/gradManage.js'
import { getField } from '@/api/user.js'
export default {
  data() {
    return {
      // 搜索表单
      formInline: {
        type: '1',
      },
      //列表信息
      tableData: [],
      loading1: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      showFlag: false,
      orgId: null,
      modelName: null,
      dataList: [],
      loading: false,
      levelOptions: [],
    }
  },
  created() {
    let params = {
      page: 1,
      size: 100,
      code: 'LEVEL',
    }
    getField(params).then((res) => {
      if (res.status) {
        this.levelOptions = res.data.records.map((item) => {
          return { label: item.fieldName, value: Number(item.fieldCode) }
        })
      }
    })
    //this.getData();
    this.handleSearch()
  },
  methods: {
    //搜索
    handleSearch() {
      let formLine = this.formInline
      let params = {
        ...formLine,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type: '1',
      }
      this.loading1 = true
      getManageList(params).then((res) => {
        if (res.status) {
          this.loading1 = false
          this.tableData = res.data.records
          this.total = Number(res.data.total)
        }
      })
    },
    sizeChange(val) {
      this.pageSize = val
      this.handleSearch()
    },
    pageChange(val) {
      this.pageNum = val
      this.handleSearch()
    },
    //重置
    handleReset() {
      this.formInline = { type: '1' }
      this.handleSearch()
    },
    //定义
    handleCheck(row) {
      this.showFlag = true
      this.getData(row)
    },
    getData(row) {
      let { orgId, modelName } = row
      this.orgId = orgId
      this.modelName = modelName
      this.loading = true
      getScoringScoreList({ orgId, modelName }).then((res) => {
        if (res.status) {
          this.loading = false
          this.dataList = res.data.map((item) => {
            return {
              id: item.id,
              level: item.level,
              maxValue: item.maxValue,
              meaning: item.meaning,
              minValue: item.minValue,
            }
          })
        }
      })
    },
    //新增
    editMailbox() {
      this.dataList.push({ modelName: this.modelName })
    },
    //保存
    saveMailbox() {
      let dataList = this.dataList
      editScoringScore(dataList).then((res) => {
        if (res.status) {
          this.showFlag = false
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          })
        }
        //this.getData();
      })
    },
    //删除
    handleDelete(scope) {
      this.dataList.splice(scope['$index'], 1)
      /* this.$confirm("确定删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
      }).then(() => {
        deletecoringScore({id:scope.row.id}).then(res=>{
            if(res.status){
              this.$message({
                  type: "success",
                  message: "删除成功!"
              });
              this.getData();
            }
        }) 
      }) */
    },
  },
}
</script>

<style scoped lang="scss">
.list {
  .pagination {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.save {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.search {
  padding: 20px 0 20px 20px;
  background:#fff;
}
.formItem {
  width: 100%;
  /deep/.el-form-item__content {
    width: calc(100% - 125px);
    /deep/.el-select,
    /deep/.el-cascader {
      width: 100%;
    }
    .w100 {
      width: 100% !important;
    }
  }
}

.dialog-footer {
  margin-top: 20px;
  text-align: center;
}

/deep/.el-dialog__body {
  padding-bottom: 20px;
}
</style>